<template>
  <div class="orderDetail" style="display: flex; justify-content: end; animation-duration: 0.5s; z-index: 9999;">
      <div style="width: calc(100% - 1300px); height: 100vh;"  @click.stop="guanbi()">

      </div>
      <div  class=" animate__animated animate__fadeInRight" style="background: #fff; width: 1300px;  overflow: auto; height: 100vh; padding: 20px; box-sizing: border-box; color: #666666;">
        <div class="kflexbc" style="margin-bottom: 20px;">
          <div style="color: #000; font-weight: bold;">订单详情</div>
          <div style="cursor: pointer; color: #000;" @click.stop="guanbi()">关闭</div>
        </div>
        <div class="kflex" style="margin-bottom: 20px;">
          <div class="w400 kflex">
            <div class='tr' >订单ID:</div>
            <div>{{all.id}}</div>
          </div>
          <div class="w500 kflex">
            <div class='tr' >外部订单编号:</div>
            <div>{{all.source_id}}</div>
          </div>
        </div>
        <div class="kflex" style="margin-bottom: 20px;">
          <div class="w400 kflex">
            <div class='tr' >用户下单时间:</div>
            <div>{{all.ordered_at}}</div>
          </div>
          <div class="w400 kflex">
            <div class='tr' >平台创建时间:</div>
            <div>{{all.created_at}}</div>
          </div>
          <div class="w400 kflex">
            <div class='tr' >状态变更时间:</div>
            <div>{{all.status_updated_at}}</div>
          </div>
        </div>

         <el-divider></el-divider>

        <div class="kflex" style="margin-bottom: 20px;">
          <div class="w400 kflex">
            <div class='tr' >订单来源:</div>
            <div>{{all.source}}</div>
          </div>
          <div class="w400 kflex">
            <div class='tr' >收货人:</div>
            <div>{{all.address_name}}</div>
          </div>
          <div class="w400 kflex">
            <div class='tr' >上游订单号:</div>
            <div>{{all.upstream_order_id}}</div>
          </div>
        </div>
        <div class="kflex" style="margin-bottom: 20px;">
          <div class="w400 kflex">
            <div class='tr' >分销商:</div>
            <div>{{all.merchant_name}}</div>
          </div>
          <div class="w400 kflex">
            <div class='tr' >联系电话:</div>
            <div>{{all.address_mobile}}</div>
          </div>
        </div>
        <div class="kflex" style="margin-bottom: 20px;">
          <div class="w400 kflex">
            <div class='tr' >订单状态:</div>
            <div>{{all.status_name}}</div>
          </div>
          <div class="w400 kflex">
            <div class='tr'>收货地址:</div>
            <div>{{all.address_province}}{{all.address_city}}{{all.address_district}}{{all.town}}{{all.address}}</div>
          </div>
        </div>

        <div class="kflex" style="margin-bottom: 20px;">
          <div class="w400 kflex">
            <div class='tr' >退款状态:</div>
            <div>{{all.refund_status}}</div>
          </div>
          <div class=" kflex">
            <div class='tr' >证件姓名:</div>
            <div>{{all.id_card_name}}</div>
            <span style="margin-left:20px; color:#409eff; cursor:pointer;" @click="seephoto(all.id_card_num,all.id)">查看照片</span>
            <span style="color:#409eff;margin-left:20px; cursor: pointer;" @click="jiemi">查看完整信息</span>
          </div>
        </div>

        <div class="kflex" style="margin-bottom: 20px;">
          <div class="w400 kflex">
            <div class='tr' >上游状态:</div>
            <div>{{all.up_status}}</div>
          </div>
          <div class="w400 kflex">
            <div class='tr' >证件号码:</div>
            <div>{{all.id_card_num}}</div>
          </div>
        </div>

         <el-divider></el-divider>

        <div style="margin-bottom: 20px; color: #000; font-weight: bold;">产品信息</div>

        <div class="kflex" style="margin-bottom: 20px;">
          <div class="w400 kflex">
            <div class='tr' >产品渠道:</div>
            <div>{{all.supplier_product_name}}</div>
          </div>
          <div class="w400 kflex">
            <div class='tr' >产品渠道编码:</div>
            <div>{{all.supplier_product_sku}}</div>
          </div>
          <div class="w400 kflex">
            <div class='tr' >商品名称:</div>
            <div>{{all.product_sku}}</div>
          </div>
        </div>
        <div class="kflex" style="margin-bottom: 20px;">
          <div class="w400 kflex">
            <div class='tr' >商品编码:</div>
            <div>{{all.source_sku}}</div>
          </div>
          <div class="w400 kflex">
            <div class='tr' >归属地:</div>
            <div>{{all.region_p}}{{all.region_c}}</div>
          </div>
          <div class="w400 kflex">
            <div class='tr' >购买号码:</div>
            <div>{{all.plan_mobile}}</div>
          </div>
        </div>
        <div class="kflex" style="margin-bottom: 20px;">
          <div class="w400 kflex">
            <div class='tr' >购买数量:</div>
            <div>{{all.amount}}</div>
          </div>
        </div>

         <el-divider></el-divider>

        <div style="margin-bottom: 20px; color: #000; font-weight: bold;">备注信息</div>

        <div style="margin-bottom: 20px;">
          <div class="kflex"style="margin-bottom: 20px;">
            <div class='tr' >买家备注:</div>
            <div>{{all.buyer_memo}}</div>
          </div>
          <div class="kflex"style="margin-bottom: 20px;">
            <div class='tr' >卖家备注:</div>
            <div>{{all.memo}}</div>
          </div>
        </div>

         <el-divider></el-divider>

        <div style="margin-bottom: 20px; color: #000; font-weight: bold;">发货&激活信息</div>

        <div class="kflex" style="margin-bottom: 20px;">
          <div class="w400 kflex">
            <div class='tr' >物流公司:</div>
            <div>{{all.tracking_company}}</div>
          </div>
          <div class="w400 kflex">
            <div class='tr' >物流单号:</div>
            <div>{{all.tracking_number}}</div>
          </div>
          <div class="w400 kflex">
            <div class='tr' >生产号码:</div>
            <div>{{all.plan_mobile_produced}}</div>
          </div>
        </div>
        <div class="kflex" style="margin-bottom: 20px;">
          <div class="w400 kflex">
            <div class='tr' >ICCID:</div>
            <div>{{all.iccid}}</div>
          </div>
          <div class="w400 kflex">
            <div class='tr' >激活状态:</div>
            <div>{{all.active_status != '激活且充值'?all.active_status:'已激活'}}</div>
          </div>
          <div class="w400 kflex">
            <div class='tr' >激活时间:</div>
            <div>{{all.activated_at}}</div>
          </div>
        </div>
        <div class="kflex" style="margin-bottom: 20px;">
          <div class="w400 kflex">
            <div class='tr' >充值状态:</div>
            <div>{{all.active_status == '激活且充值'?'已充值':'无'}}</div>
          </div>
          <div class="w400 kflex">
            <div class='tr' >充值时间:</div>
            <div>{{all.recharged_at}}</div>
          </div>
        </div>

         <el-divider></el-divider>

        <div style="margin-bottom: 20px; color: #000; font-weight: bold;">投放信息
          <span v-if="all.promotion.status==0"
            style="background: #409eff; font-size: 12px; color: #fff; padding: 5px 10px; border-radius: 2px; margin-left: 20px;">未投放</span>
          <span v-if="all.promotion.status==1"
            style="background: #2974FF; font-size: 12px; color: #fff; padding: 5px 10px; border-radius: 2px; margin-left: 20px;">已投放</span>
        </div>

        <div class="kflex" style="margin-bottom: 20px;">
          <div class="w400 kflex">
            <div class='tr' style="width: 130px;">项目ID:</div>
            <div>{{all.promotion.projectid}}</div>
          </div>
          <div class="w400 kflex">
            <div class='tr' style="width: 130px;" >广告ID:</div>
            <div>{{all.promotion.promotionid}}</div>
          </div>
          <div class="w400 kflex">
            <div class='tr' style="width: 130px;" >用户点击ID:</div>
            <div>{{all.promotion.clickid}}</div>
          </div>
        </div>
        <div class="kflex" style="margin-bottom: 20px;">
          <div class="w400 kflex">
            <div class='tr' style="width: 130px;" >计划ID:</div>
            <div>{{all.promotion.aid}}</div>
          </div>
          <div class="w400 kflex">
            <div class='tr' style="width: 130px;" >媒体位ID:</div>
            <div>{{all.promotion.unionsite}}</div>
          </div>
          <div class="w400 kflex">
            <div class='tr' style="width: 130px;" >广告账户ID</div>
            <div>{{all.promotion.advertiserid}}</div>
          </div>
        </div>
        <div class="kflex" style="margin-bottom: 20px;">
          <div class="w400 kflex">
            <div class='tr' style="width: 130px;" >广告投放位置:</div>
            <div>{{all.promotion.csite}}</div>
          </div>
          <div class="w400 kflex">
            <div class='tr' style="width: 130px;" >操作平台系统:</div>
            <div>{{all.promotion.os}}</div>
          </div>
        </div>

         <el-divider></el-divider>

        <div style="font-weight: bold; color: #000; margin-bottom: 20px;">操作记录：</div>
        <div class="memlist">
          <div v-for="item in seller_memolist">
            {{item}}
          </div>
        </div>
      </div>

      <el-dialog title="重新上传照片" :visible.sync="seephotolog" :close-on-click-modal="false" width="1254px">
        <div v-loading="seephotoloading">
          <div class="logflex">
            <div class="proimg" v-if="choose.face != ''"><img :src="choose.face" /></div>
            <div class="proimg" v-if="choose.face == ''">暂无照片</div>
            <div class="proimg" v-if="choose.back != ''"><img :src="choose.back" /></div>
            <div class="proimg" v-if="choose.back == ''">暂无照片</div>
            <div class="proimg" v-if="choose.hand != ''"><img :src="choose.hand" /></div>
            <div class="proimg" v-if="choose.hand == ''">暂无照片</div>
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="seephotolog = false" size="small">好的</el-button>
        </span>
      </el-dialog>






  </div>

</template>

<script>
  import axios from 'axios'
  import "animate.css"
  export default {
    props:['id'],
    name: "orderDetaillog",
    data() {
      return {
        all: {},
        seller_memolist: [],
        loading: true,
        seephotolog: false,
        choose: {
          face: "",
          back: "",
          hand: ""
        },
        waitpic: false,
        seephotoloading: false
      }
    },
    created() {
      console.log(this.id)
    },
    mounted() {

    },
    methods: {
      guanbi:function(){
        this.$emit('guanbi')
      },
      chushihua:function(){
        axios.get("/api/plan-market/order/detail?order_id=" + this.id)
          .then(response => {
            if (response.data.msg.code == 0) {
              this.seller_memolist = response.data.data.seller_memo.split("</br>")
              this.all = response.data.data
              this.loading = false
            } else {
              this.$message.error(response.data.msg.info);
            }
          })
      },

      jiemi: function(item, index) {

        this.$set(this.all, 'id_card_name', this.decrypt(this.all.encrypt_id_card_name))
        this.$set(this.all, 'id_card_num', this.decrypt(this.all.encrypt_id_card_num))
        this.$set(this.all, 'address_name', this.decrypt(this.all.encrypt_address_name))
        this.$set(this.all, 'address_mobile', this.decrypt(this.all.encrypt_address_mobile))
        this.$set(this.all, 'address', this.decrypt(this.all.encrypt_address))

        let address = this.decrypt(this.all.encrypt_address)
        let town = this.decrypt(this.all.town)

        if (address.includes(town)) {
          this.$set(this.all, 'town', '')
        }
      },
      //查看照片
      seephoto: function(id_card_num, ordernum) {
        //没加载之前
        this.seephotolog = true
        this.seephotoloading = true
        this.choose.face = ""
        this.choose.back = ""
        this.choose.hand = ""

        var that = this
        axios.get('/api/plan-market/order/photos/url?id_card_num=' + id_card_num + '&id=' + ordernum)
          .then(response => {
            if (response.data.msg.code != 0) {
              that.$message.error(response.data.msg.info);
            } else {
              var random = Math.random()
              if (response.data.data.face_url != '') {
                that.choose.face = response.data.data.face_url + '?v=' + random
              } else {
                that.choose.face = ''
              }
              if (response.data.data.back_url != '') {
                that.choose.back = response.data.data.back_url + '?v=' + random
              } else {
                that.choose.back = ''
              }
              if (response.data.data.hand_url != '') {
                that.choose.hand = response.data.data.hand_url + '?v=' + random
              } else {
                that.choose.hand = ''
              }
              that.seephotoloading = false
            }
          })
      }
    }
  }
</script>

<style lang="scss" scoped>

  .orderDetail{
    position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.5);
    .w300{ width: 300px;}
    .w400{ width: 400px;}
    .w500{ width: 700px;}
    .tr{margin-right: 20px; width: 130px; text-align: right; color: rgb(51, 51, 51);}
  }
</style>
